<kbn-management-app section="kibana">
  <kbn-management-indices>
    <div ng-controller="managementIndicesCreate" class="kbn-management-indices-create">
      <div class="page-header">
        <h1 translate="KIBANA-CONFIGURE_INDEX_PATTERN"></h1>
        <p translate="KIBANA-MUST_CONFIGURE_INDEX_PATTERN"></p>
      </div>
      <div>
        <form name="form" role="form" class="well" ng-submit="createIndexPattern()">
          <div class="form-group">
            <label translate="KIBANA-INDEX_NAME_OR_PATTERN"></label>
            <p class="help-block" ng-if="!index.nameIsPattern" translate="KIBANA-WILDCARD_DYNAMIC_INDEX_PATTERNS"></p>
            <p class="help-block" ng-if="index.isTimeBased && index.nameIsPattern"><span translate="KIBANA-STATIC_TEXT_IN_DYNAMIC_INDEX_PATTERNS"></span> &mdash;
              <small><a target="_blank" href="http://momentjs.com/docs/#/displaying/format/" translate="KIBANA-DATE_FORMAT_DOCS"></a></small></p>
            <input
              ng-model="index.name"
              ng-attr-placeholder="{{index.defaultName}}"
              ng-model-options="{ updateOn: 'default blur', debounce: {'default': 2500, 'blur': 0} }"
              validate-index-name
              allow-wildcard
              name="name"
              required
              type="text"
              class="form-control">
              <small ng-show="index.nameInterval.name == 'weeks'">
                <strong translate="KIBANA-NOTE_COLON"></strong>&nbsp;
                <span translate="KIBANA-WEEKLY_ISO_NOTICE"></span>
                <span translate="KIBANA-SEE"></span>
                <a href="https://en.wikipedia.org/wiki/ISO_week_date" target="_blank" title="Wikipedia: ISO Week Date" translate="KIBANA-WIKI_ISO_WEEK_DATE"></a>
              </small>
            </div>

          <div class="form-group time-and-pattern">
            <label>
              <input
                ng-model="index.isTimeBased"
                type="checkbox">
              <span translate="KIBANA-CONTAINS_TIME_BASED_EVENTS"></span>
            </label>
          </div>

          <div class="form-group" ng-if="index.isTimeBased">
            <label>
              <span translate="KIBANA-TIME_FIELD_NAME"></span>
              &nbsp;
              <kbn-info info="{{ 'KIBANA-FIELD_FILTER_EVENTS_GLOBAL_TIME' | translate }}"></kbn-info>
              &nbsp;
              <small>
                <a ng-click="refreshFieldList();" translate="KIBANA-REFRESH_FIELDS"></a>
              </small>
            </label>
            <select
              ng-disabled="index.fetchFieldsError"
              ng-required="!index.fetchFieldsError"
              ng-options="field.name for field in index.dateFields"
              ng-model="index.timeField"
              auto-select-if-only-one="index.dateFields"
              class="form-control">
            </select>
          </div>

          <div class="form-group" ng-if="canExpandIndices()">
            <label>
              <input ng-model="index.expandable" type="checkbox">
                <span translate="KIBANA-EXPAND_INDEX_PATTERN"></span>
            </label>

            <p class="help-block" translate="KIBANA-WILDCARD_DEFAULT_EXPANDED_TO_CURRENT_TIME_RANGE"></p>

            <p class="help-block">
              <span translate="KIBANA-SEARCH_AGAINST_INDEX_PATTERN"></span>
              <em translate="KIBANA-LOGSTASH_WILDCARD"></em>
              <span translate="KIBANA-ACTUALLY_QUERY"></span>
              <em translate="KIBANA-EXAMPLE_TIME_RANGE"></em>
              <span translate="KIBANA-FALL_WITHIN_CURRENT_TIME_RANGE"></span>
            </p>

            <p class="help-block" translate="KIBANA-EXPAND_INDEX_PATTERN_DEPRECATION"></p>
          </div>

          <div class="form-group time-and-pattern">
            <label ng-if="index.isTimeBased">
              <input ng-model="index.nameIsPattern" type="checkbox">
              <span translate="KIBANA-INDEX_NAME_CREATED_BY_EVENT_TIMES"></span>
              <small translate="KIBANA-DEPRECATED"></small>
            </label>
          </div>

          <div class="form-group" ng-if="index.isTimeBased && index.nameIsPattern">
            <div class="alert alert-warning">
              </p>
              <h4 translate="KIBANA-ALERT_INDEX_PATTERN_DEPRECATED"></h4>
              <p>
                <span translate="KIBANA-WE"></span>
                <strong translate="KIBANA-STRONGLY_RECOMMEND"></strong>
                <span translate="KIBANA-WILD_CARD_PATTERN"></span>
              </p>
            </div>
            <label>
              <span translate="KIBANA-INDEX_PATTERN_INTERVAL"></span>&nbsp;
              <kbn-info info="{{ 'KIBANA-INTERVAL_INDEX_NAMES_ROTATE' | translate }}"></kbn-info>
            </label>
            <select
              required
              ng-options="opt.display for opt in index.nameIntervalOptions"
              ng-model="index.nameInterval"
              class="form-control">
            </select>
          </div>

          <section>
            <div class="alert alert-danger" ng-repeat="err in index.patternErrors">
              {{err}}
            </div>

            <div class="alert alert-info" ng-if="index.samples">
              <span translate="KIBANA-SAMPLE_ALERT"></span>
              <ul>
                <li ng-repeat="sample in index.samples">{{sample}}</li>
              </ul>
              <button type="button" ng-click="moreSamples(true)" class="btn btn-default">
                <span translate="KIBANA-EXPAND_SEARCH"></span>
              </button>
            </div>

            <div class="alert alert-{{index.existing.class}}" ng-if="index.existing">
              <span translate="KIBANA-EXISTING_MATCH_PERCENT" translate-values="{ indexExistingMatchPercent: '{{index.existing.matchPercent}}' }"></span>
              <ul>
                <li ng-repeat="match in index.existing.matches | orderBy:'toString()'| limitTo: index.sampleCount">{{match}}</li>
              </ul>
              <button
                ng-if="index.sampleCount < index.existing.matches.length"
                ng-click="moreSamples()"
                type="button"
                class="btn btn-default">
                <span translate="KIBANA-EXPAND_SEARCH"></span>
              </button>
            </div>

            <div class="alert alert-info" ng-if="index.existing.failures.length">
              <span translate="KIBANA-NON_MATCHING_INDICES_AND_ALIASES"></span>
              <ul>
                <li ng-repeat="match in index.existing.failures | limitTo: index.sampleCount">{{match}}</li>
              </ul>
              <a
                ng-if="index.sampleCount < index.existing.matches.length"
                ng-click="moreSamples()"
                class="alert-link">
                <span translate="KIBANA-MORE"></span>
              </a>
            </div>
          </section>

          <button
            data-test-subj="submitCreateIndexPatternFromExistingForm"
            ng-disabled="form.$invalid || index.fetchFieldsError"
            ng-class="index.fetchFieldsError ? 'btn-default' : 'btn-success'"
            type="submit"
            class="btn">
            <span ng-hide="form.name.$error.indexNameInput" ng-if="index.fetchFieldsError">{{index.fetchFieldsError}}</span>
            <span ng-hide="form.name.$error.indexNameInput" ng-if="!index.fetchFieldsError" translate="KIBANA-CREATE"></span>
            <span ng-show="form.name.$error.indexNameInput" translate="KIBANA-INVALID_INDEX_PATTERN"></span>
          </button>
        </form>
      </div>
    </div>
  </kbn-management-indices>
</kbn-management-app>
